import { Button, Form, Input, message } from 'antd';
import React, { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import { login } from '../../app/user/userSlice';
import url from '../../assets/back.webp'
import style from './style.module.css'
import { useNavigate } from 'react-router-dom'


const App: React.FC = () => {
  const dispath = useAppDispatch()
  const loading = useAppSelector(state => state.user.loading)
  const token = useAppSelector(state => state.user.token)
  const user_name = useAppSelector(state => state.user.userInfo.user_name)
  const navigate = useNavigate()
  const onFinish = (values) => {
    dispath(login(values))
  };
  const onFinishFailed = () => {
    message.error('账户密码不可以为空！！')
  };

  useEffect(() => {
    if (token) {
      message.success('登录成功 欢迎' + user_name)
      navigate('/')
    }
  }, [token])

  return (
    <div>
      <img src={url} alt="" className={style['back']} />
      <div className={style['from']}>
        <Form
          name="basic"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          initialValues={{ user: 'admin', pwd: 'admin' }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            wrapperCol={{ offset: 4, span: 20 }}
          >
            <h2 style={{ textAlign: 'center', color: 'white' }}>用户登录</h2>
          </Form.Item>
          <Form.Item
            label="用户名"
            name="user"
            rules={[{ required: true, message: 'Please input your user!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="pwd"
            rules={[{ required: true, message: 'Please input your pwd!' }]}
          >
            <Input.Password />
          </Form.Item>


          <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
            <Button type="primary" htmlType="submit" block loading={loading}>
              登录
            </Button>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
            <Button type="primary" htmlType="reset" block>
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};


export default (App);